<template>
  <div>
    <!-- 背景图 -->
    <div :style="'background-image:url('+bjt+')'" class="kj">
      <!-- 返回图标 -->
      <div>
        <router-link to="/home">
          <van-icon name="share" class="fhtb" />
          <br>
          <span class="fanhui">返回</span>
        </router-link>
      </div>

      <!-- 用户头像 -->
      <van-image round width="8rem" height="8rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="jvz" />
      <!-- 用户名 -->
      <h1 class="username">圣灵o心陌</h1>

    </div>
    <div class="yiy">
      <van-row type="flex" justify="space-around">
        <van-col span="6" class="bk ysyw">
          <p class="shuli">21</p>
          <p class="ys">
            <van-icon name="good-job" />已掌握
          </p>
        </van-col>
        <van-col span="6" class="bk  ysyw2">
          <p class="shuli">21</p>
          <p class="ys">
            <van-icon name="checked" />已学
          </p>

        </van-col>
        <van-col span="6" class="bk  ysyw3">
          <p class="shuli">21</p>
          <p class="ys">
            <van-icon name="underway" />已未学
          </p>

        </van-col>
      </van-row>

    </div>
    <!-- 退出登陆 -->
    <div>
      <van-button style="background-color:#39a9ed" size="large" class="xxys">退出登陆</van-button>
    </div>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 动态绑定背景图
        bjt: 'https://wallpaperm.cmcm.com/8a114ce441360e3595a7f657f91a143d.jpg'
      }
    },
    methods: {

    }
  }
  import Vue from 'vue';
  import { Image as VanImage, Col, Row } from 'vant';
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(VanImage);

</script>

<style lang="less" scoped>
  .kj {
    width: 100%;
    height: 300px;
    display: block;
    position: relative;
  }

  .fhtb {
    margin-left: 8px;
    margin-top: 8px;
    color: white;
    font-size: 38px;
  }

  .fanhui {
    color: white;
    font-weight: 700;
    margin-left: 10px;
  }

  .jvz {
    display: block;
    margin: auto;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    margin-top: -64px; /* /向上64px */
    margin-left: -64px; /* 向左64px */
  }

  .username {
    text-align: center;
    color: white;
    position: relative;
    top: 150px;
  }

  .yiy {
    box-shadow: 0px 0.3px 13px 0.3px rgb(226, 225, 225);
  }

  .bk {
    height: 100px;
    text-align: center;
    line-height: 2px;
  }

  .shuli {
    font-weight: 700;
    font-size: 30px;
  }

  .ys {
    font-size: 18px;
    font-weight: 700;
  }

  .ysyw {
    color: green;
  }

  .ysyw2 {
    color: rgb(39, 197, 245);
  }

  .ysyw3 {
    color: rgb(161, 1, 1);
  }

  .xxys {
    margin-top: 120px;
    color: white;
    font-size: 20px;
  }
</style>